<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
<div class="container-login">
    <div class="container-pic">
        <img src="pic/computer.png" width="350px">
    </div>
    <div class="login-dialog">
        <h3>登陆</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" name="userName" id="userName" class="form-control">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" name="password" id="password" class="form-control">
        </div>
        <div class="row">
            <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
        </div>
    </div>
</div>
<!-- 引入jQuery库 -->
<script src="js/jquery.min.js"></script>
<script>
    /**
     * 登录处理函数
     * 当用户点击登录按钮时调用
     */
    function login() {
        // 使用jQuery Ajax发送登录请求
        $.ajax({
            type: "post",           // 请求方法为POST
            url: "/user/login",     // 请求的URL地址
            data: {                 // 请求参数
                name: $("#userName").val(),     // 获取用户名输入框的值
                password: $("#password").val()  // 获取密码输入框的值
            },
            success: function (result) {
                // 请求成功回调函数，result为服务器返回的数据
                if (result) {
                    // 登录成功，跳转到图书列表页面
                    location.href = "book_list.html";
                } else {
                    // 登录失败，显示错误提示
                    alert("账号或密码不正确!");
                }
            },
            error: function (xhr, status, error) {
                // 请求失败处理
                console.error("登录请求失败:", error);
                alert("网络错误，请稍后重试!");
            }
        });
    }
</script>
</body>

</html>